<!--
 * @Descripttion: 角色下分配的用户
 * @version:
 * @Author: 穆宏宇
 * @Date: 2020-09-27 13:01
 * @LastEditors: a12
 * @LastEditTime: 2020-09-27 13:01
-->
<template>
  <el-card class="box-card">
    <eManage ref="e-manage"
             :search-form-options="formOptions"
             :controlBtns="btns"
             :searchShow="true"
             :operationShow="true"
             :tableColumns="columns"
             :interFace="interFaces"
             :tableBtnType="0"
             @add-user="addUser"
             @on-delete="onDelete"
             @on-other="handleOther"
             @update-list-data="listData">
    </eManage>
<!--    <role-add-users-component>-->
<!--    -->
<!--    </role-add-users-component>-->
    <role-add-users-component ref="dialog"
                              :roleId = "roleId">
    </role-add-users-component>
  </el-card>
</template>

<script>
  import eManage from '@/components/e-manage'
  import {btns, formOptions} from "./control";
  import columns from "./columns";
  import interFaces from "./interFaces";
  import moment from 'moment'
  import roleAddUsersComponent from '@/views/admin/role-manager/role-add-users/index'
  import { deleteRoleIdDownUsers } from '@/api/admin.api'
  export default {
    name: 'distribution-users',
    components: {
      eManage,
      roleAddUsersComponent
    },
    data() {
      return {
        formOptions,
        btns,
        columns,
        interFaces,
        roleId:''
      }
    },
    watch: {},
    filters: {
      formeTime(val){
        return val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : ' '
      }
    },
    computed: {
    
    },
    created() {
      this.roleId = this.$route.query.id
      this.interFaces.select.url = `/api/role/user/${this.roleId}`
    },
    mounted() {
    
    },
    methods: {
      // 重置列表更新时间格式
      listData (data){
        let listData = []
        for (let i = 0, max = data.length; i < max; i++) {
          const item = data[i]
          if (item.updateTime && isNaN(item.updateTime) && item.updateTime !== 'null') {
           item.updateTime =  this.$options.filters.formeTime(item.updateTime)
          }
          listData.push(item)
        }
        this.$refs['e-manage'].tableData = listData
      },
      handleOther () {},
      onDelete (row) {
        this.$confirm('此操作将永久删除该用户吗？ 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteRoleIdDownUsers(this.roleId,row.id).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            // this.refreshTable ()
            this.$refs['e-manage'].refreshPageCurrent()
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      /**
       * @description 添加用户
       * @author 穆宏宇
       * @date 2020-09-27 13:43:14
       * @param
       * @return
       * */
      addUser () {
        this.$refs['dialog'].dialogRoleVisible = true
      },
      // 刷新列表
      refreshTable () {
        this.$refs['e-manage'].refreshPageCurrent()
      }
    }
  }
</script>

<style scoped lang="scss">
  .box-card {
    margin: 4px;
    height: calc(100vh - 90px);
    .el-card__body {
      padding: 0;
    }
  }
 ::v-deep .add-btn {
    background: green;
    color: white;
  }
  .delete-style{
    color: #F94039;
    background: #feeceb;
    border-color: #fdb3b0;
    &:hover{
      background: #F94039;
      border-color: #F94039;
      color: #FFFFFF;
    }
  }
</style>
